import * as React from 'react';
import { useEffect, useState } from 'react';
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux';
//ui
import { Button, Modal } from 'antd';
import WordTagIndex from './components';
import styles from './style.module.scss'
//comp
import WordTagSelect from '../WordTagSelect';
//state
import { WordTagState } from './reducer';
import { MainInfoState } from '../MainInfo/reducer';
import { WordTagSelectState } from '../WordTagSelect/reducer';
//action
import * as Action from './reducer'
import * as  WordTagSelectStateAction from '../WordTagSelect/reducer';

export interface WordTagInfoProps {
    state: WordTagState
    wordTagSelect: WordTagSelectState
    mainInfoState: MainInfoState

    fetch: typeof Action.fetch
    add: typeof Action.add
    edit: typeof Action.edit
    remove: typeof Action.remove
    setCurrentTagValueInner: typeof WordTagSelectStateAction.setCurrentTagValueInner

}

export const _WordTag: React.SFC<WordTagInfoProps> = (props) => {
    const {
        state, mainInfoState, wordTagSelect,
        fetch, add, edit, remove, setCurrentTagValueInner
    } = props

    const [addModal, setAddModal] = useState(false);
    const [editModal, setEditModal] = useState(false);

    const [thisTagValue, setThisTagValue] = useState('');

    useEffect(() => {
        if (mainInfoState.word)
            fetch(mainInfoState.word)
    }, [fetch, mainInfoState.word])

    useEffect(() => {
        if (editModal)
            setCurrentTagValueInner(thisTagValue)
    }, [editModal, setCurrentTagValueInner, thisTagValue])

    const btnAddOk = () => {
        if (mainInfoState.word && wordTagSelect.currentTagValueInner && wordTagSelect.currentTagValueInner !== '默认')
            add(mainInfoState.word, wordTagSelect.currentTagValueInner)
        setAddModal(false)
    }

    const btnEditOk = () => {
        if (mainInfoState.word && wordTagSelect.currentTagValueInner && wordTagSelect.currentTagValueInner !== '默认')
            edit(mainInfoState.word, thisTagValue, wordTagSelect.currentTagValueInner)
        setEditModal(false)
    }



    const render = (e: Action.WordTagIndexDto) => {
        const btnEdit = () => {
            setThisTagValue(e.wordTagValue)
            setEditModal(true)
        }
        const btnRemove = async () => {
            if (mainInfoState.word) {
                if (state.dto.dtos.length === 1) {
                    add(mainInfoState.word, '默认')
                    remove(mainInfoState.word, e.wordTagValue)
                }
                else {
                    remove(mainInfoState.word, e.wordTagValue)
                }
            }

        }

        if (e.wordTagValue !== '默认')
            return (
                <WordTagIndex
                    key={e.wordTagValue}
                    onEdit={btnEdit}
                    onRemove={btnRemove}
                    style={{ margin: '0.5em' }}
                >{e.wordTagValue}</WordTagIndex>
            )
        else
            return (<div key={e.wordTagValue}></div>)
    }

    return (
        < div >
            <div className={styles.warpper}>
                {state.dto.dtos.map(render)}
                <Button className={styles.flexItem} onClick={() => {
                    setCurrentTagValueInner('默认')
                    setAddModal(true)
                }}>添加标签</Button>
            </div>

            <Modal
                visible={addModal}
                title='新建标签'
                onOk={btnAddOk}
                onCancel={() => setAddModal(false)}
            >
                <WordTagSelect useInnerValue />
            </Modal>

            <Modal
                visible={editModal}
                title='修改标签'
                onOk={btnEditOk}
                onCancel={() => setEditModal(false)}
            >
                <WordTagSelect useInnerValue />
            </Modal>
        </div >
    );
}
const mapStateToProps = (state: RootState) => ({
    state: state.WordTagState,
    wordTagSelect: state.WordTagSelectState,
    mainInfoState: state.MainInfoState,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        fetch: Action.fetch,
        add: Action.add,
        edit: Action.edit,
        remove: Action.remove,
        setCurrentTagValueInner: WordTagSelectStateAction.setCurrentTagValueInner,
    }, dispatch);

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordTag = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordTag)

export default WordTag